<template>
	<div id="data_package">
		<div>
			<el-form>
				<el-form-item>
					<el-select v-model="oldType" placeholder="选择新旧统计" @change="changeSummary">
						<el-option
								v-for="item in oldTypeList"
								:key="item.value"
								:label="item.label"
								:value="item.value">
						</el-option>
					</el-select>
					<span v-if="oldType==1"> 新统计从2021-07-07开始统计</span>
				</el-form-item>
			</el-form>
		</div>
		<div class="data animated fadeIn">
			<div>
				<div class="font_text">今日包裹</div>
				<div class="theme">{{countData.thisSum}}</div>
			</div>
			<div>
				<div class="font_text">昨日包裹</div>
				<div class="theme">{{countData.lastSum}}</div>
			</div>
			<div>
				<div class="font_text">近7天包裹</div>
				<div class="theme">{{countData.sevenSum}}</div>
			</div>
			<div>
				<div class="font_text">近30天包裹</div>
				<div class="theme">{{countData.thirtySum}}</div>
			</div>
		</div>

		<DateSelectView @changeDate="getDate" class="margin_top20 align-right" />

		<div id="package_data" style="width: 100%; height: 500px; margin-top: 20px;"></div>
	</div>
</template>

<script>
	import DateSelectView from '@/components/DateSelectView'
	import echarts from 'echarts'

	export default {
		components: {
			DateSelectView
		},

		data() {
			return {
				countData: {
					thisSum: null,
					lastSum: null,
					sevenSum: null,
					thirtySum: null
				},

				oldType:1,
				oldTypeList: [
					{ value: 1, label: '新统计' },
					{ value: 2, label: '旧统计' },
				],
				result:{}
			};
		},

		mounted() {
			this.getCountData()
		},

		methods: {
			changeSummary(){
				this.getCountData();
				this.getDate(this.result);
			},

			getCountData() {
				var url
				var otherType = '';
				if (this.oldType == 1) {
					url = '/tenant/sysSummary/countData';
					otherType = 3;
				}else{
					url = '/tenant/pkInfo/countData';
				}
				this.$request.post({
					url: url,
					params: {
						otherType,
					},
					success: result => {
						this.countData.thisSum = result.thisSum || 0
						this.countData.lastSum = result.lastSum || 0
						this.countData.sevenSum = result.sevenSum || 0
						this.countData.thirtySum = result.thirtySum || 0
					}
				})
			},

			getDate(result) {
				this.load = true
				this.result = result;
				var url
				var otherType = '';
				if (this.oldType == 1) {
					url = '/tenant/sysSummary/summaryCount';
					otherType = 3;
				}else{
					url = '/tenant/pkInfo/countByDate'
				}
				this.$request.post({
					url: url,
					params: {
						dateType: result.type,
						startTime: result.dates[0],
						endTime: result.dates[1],
						otherType
					},
					success: res => {
						var list = this.screenData(result.type, result.dateStrs, res)
						this.setEchart(result.dateStrs, list);
					},
					finally: () => {
						this.load = false
					}
				})
			},

			// 筛选数据
			screenData(type, dateStrs, datas) {
				var result = [];
				for (var i = 0; i < dateStrs.length; i++) {
					var index = datas.findIndex(item => {
						if(type=='week'){
							return item.dateTime == i
						}else if(type == "day"){
							return item.dateTime == dateStrs[i]
						}else{
							return item.dateTime == i + 1
						}
						
					})
					var item = datas[index];
					if (item && item.COUNT) {
						result.push(item.COUNT)
					} else {
						result.push(0)
					}
				}
				return result;
			},

			setEchart(dateStrs, list) {
				var chartOption = {
					title: {
						text: "包裹统计",
						subtext: '单位 / 个',
					},
					tooltip: {
						trigger: "axis"
					},
					grid: {
						left: '3%',
						right: '3%',
						top: '15%',
						containLabel: true
					},
					toolbox: {
						show: true,
						feature: {
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ["line", "bar"]
							},
							calculable: true,
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						},
						x: document.body.clientWidth - 520 + 'px', //距离X轴多远
					},
					xAxis: [{
						type: "category",
						boundaryGap: false,
						data: dateStrs
					}],
					yAxis: [{
						type: "value"
					}],
					series: [{
						name: "收入",
						type: "line",
						data: list,
						smooth: true,
						barGap: 0,
						color: '#409EFF',
						markPoint: {
							data: [{
									type: "max",
									name: "最大值",
								},
								{
									type: "min",
									name: "最小值"
								}
							]
						},
						markLine: {
							data: [{
								type: "average",
								name: "平均值"
							}]
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: "rgb(66, 158, 253, 0.4)"
									},
									{
										offset: 0.4,
										color: "rgb(66, 158, 253, 0.2)"
									},
									{
										offset: 1,
										color: "rgb(66, 158, 253, 0)"
									}
								])
							},
						}, //填充区域样式
						lineStyle: {
							color: "#409EFF",
							width: 1
						}, //线条的样式
					}]
				};
				// 基于准备好的dom，初始化echarts实例
				let chart = echarts.init(document.getElementById("package_data"));
				// 绘制图表
				chart.setOption(chartOption);
			}
		}

	}
</script>

<style>
	#data_package .animated {
		animation-duration: 0.5s !important;
	}
</style>

<style scoped>
	.data {
		display: flex;
		justify-content: space-around;
		background: #f5f5f5;
		padding: 20px 0;
		border-radius: 2px;
	}

	.data>div div {
		padding: 5px 0;
		text-align: center;
		font-size: 15px;
	}

	.data>div div:last-child {
		font-size: 22px;
		font-weight: 600;
	}
</style>
